<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<star v-model="s1"></star><h1>{{s1}}</h1>
<star v-sync="s1"></star><h1>{{s2}}</h1>
<star v-sync="s1"></star><h1>{{s2}}</h1>
</div>

    <script>
    Vue.component("star",{
        props:["value"],
        model:{
            prop:"value",
            event:"change",
        },
        template:`
            <div>
                <img v-for="i in 5" :src="i<=value?'imgs/start1.png':'imgs/start3.png'" @click="value=i">
            </div>
        `,
        watch:{
            value(newValie){
                this.$emit("change",newValie);
                console.log(newValie);
                this.$emit("update:value",newValie)
            }
        }
    })

    var v=new Vue({
        el:"#app"
        ,
        data:{
            s1:1,
            s2:2,
            s3:3,
        }
    })
</script>
</body>
</html>